<template>
  <el-drawer v-model="drawer" title="快捷回复" :direction="direction" size="50%">
    <div class="table-box">
      <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getCommonUseVoListApi">
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="handleOpenDialog(OptEnum.CREATE)"> 新增通用语 </el-button>
        </template>
        <template #status="scope">
          <el-tag :type="scope.row.status === sysEnum.EIGHT ? '' : 'danger'" style="margin-left: 5px">
            {{ filterEnum(scope.row.status, sysStatusType) }}
          </el-tag>
        </template>
        <template #operation="scope">
          <el-button type="primary" :icon="Promotion" size="small" text @click="handleSend(scope.row)"> 发送 </el-button>
          <el-button type="default" :icon="EditPen" size="small" text @click="handleOpenDialog(OptEnum.EDIT, scope.row)">
            编辑
          </el-button>
          <el-button type="danger" :icon="Delete" size="small" text @click="handleDeleteCommonUse(scope.row)"> 删除 </el-button>
        </template>
      </ProTable>
      <CommonUseDialog ref="dialogRef" @refresh-list="handleRefreshList" />
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { CirclePlus, Delete, EditPen, Promotion } from "@element-plus/icons-vue";
import { getCommonUseVoListApi, deleteCommonUseApi } from "@/api/modules/common/comuse";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { sysStatusType } from "@/biz/datas/sysData";
import { CommonUseVo } from "@/biz/interface/CommonUse";
import CommonUseDialog from "./components/CommonUseDialog.vue";
import type { DrawerProps } from "element-plus";
import saveMsg from "@/views/im/utils/saveMsg.js";
import { MESSAGE_TYPE } from "@/IM/constant";

const drawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const chooseCommonMessage = () => {
  drawer.value = true;
};
const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "selection", width: 80, fixed: "left" },
  { type: "index", label: "#", width: 60 },
  {
    prop: "content",
    label: "通用语",
    search: { el: "input" }
  },
  {
    prop: "createDate",
    label: "创建时间"
  },
  {
    prop: "operation",
    width: 240,
    fixed: "right",
    label: "操作"
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

// 删除信息
const handleDeleteCommonUse = async (params: CommonUseVo) => {
  await useHandleData(deleteCommonUseApi, { id: params.id! }, `删除【${params.content}】`);
  pTable.value.getTableList();
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};

//发送消息
const handleSend = row => {
  saveMsg(row.content, MESSAGE_TYPE.TEXT);
  drawer.value = false;
};
defineExpose({
  chooseCommonMessage
});
</script>
